<template lang="pug">
view
	view
		u-skeleton(rows="3" title :loading="isLoading")
		u-skeleton(rows="1" :loading="isLoading" rowsHeight="200")
		u-skeleton(rows="3" title :loading="isLoading")
		u-skeleton(rows="3" title :loading="isLoading")
	view.content(v-if="isLoading === false")
		view
			u-swiper.lunbo(height="260" circular :list="list1" radius="12"  @click="click")
		view.infoRow
			u-row.row1
				u-col(span="9")
					text.moenyText ￥{{commodity.price}}
				u-col(span="3")
					text.buynumText  {{commodity.buynum}}人购买付款
			text.nameText {{commodity.name}}
		u-gap(height="8" bgColor="#eee")
		view.typeRow
			u-row(@click="goType")
				u-col(span="11")
					text.typename {{commodity.typename}}: 
						text.typeinfo {{commodity.typeinfo.substring(0,24)}}...
				u-col(span="1")
					u-icon(name="arrow-right-double")
		u-gap(height="8" bgColor="#eee")
		
		view
			text.Text 相关推荐
			u-scroll-list
				view(v-for="(item, index) in list" :key="index")
					view.tuijianImg
						u--image(@click="goCommodity(item)" :lazy-load="true" :src="item.imgurl" width="110" height="110")
						text.tuijianText ￥{{item.price}}
		view
			text.Text 商品简介:
			br
			text.info(user-select) {{commodity.introduces}}
		view.goodsnav
			uni-goods-nav(:fill="true"
				:options="options" 
				:buttonGroup="buttonGroup" 
				@click="onClick"
				@buttonClick="buttonClick")
	view
		u-popup(:show="showuPopup" @close="close" @open="open" closeable)
			view.popupView
				u-row.shopinfo
					u--image( :lazy-load="true" :src="commodity.imgurl" width="90" height="90")
					view.moenyText
						text ￥{{commodity.price}}
				u-row.xuanzeMA(justify="end")
					text {{commodity.buynum}}人购买付款
				u-divider
				view.xuanzeMA
					text 选择鞋码
				view.u-page__tag-item(v-for="(item, index) in radios" :key="index")
					view.tags
						u-tag(:text="item.num" :plain="!item.checked" 
							type="warning" :name="index" @click="radioClick")
				u-divider
				view.buyNum
					u-row
						u-col(span="5")
							text.xuanzeMA 购买数量(限购十件)
						u-col(span="3") &nbsp;
						
						u-col(span="4")
							u-number-box(:min="1" :max="10" integer v-model="car.num")
				view.addCarBtn
					u-button(v-if="isbuy" type="primary" shape="circle" text="购买" @click="buyShop")
					u-button(v-if="!isbuy" type="primary" shape="circle" text="确定" @click="addCar")
	u-notify(ref="tos" message=" ")
</template>

<script>
	import {requestImg} from '@/util/Route.js'
	export default {
		data() {
			return {
				star:{},
				isbuy:false,
				showuPopup:false,
				isLoading:true,
				car:{num:1,shoesize:40},
				userinfo:{},
				cid:0,
				commodity:{},
				list1: [],
				list: [],
				radios: [{checked:false,num:37},{checked:false,num:38},{checked:false,num:39},{checked:true,num:40},{checked:false,num:41},
					{checked:false,num:42},{checked:false,num:43},{checked:false,num:44}],
				options: [{
						icon: 'headphones',
						text: '客服'
					}, {
						icon:'star',
						text:'收藏',
						infoBackgroundColor:'#007aff',
						infoColor:"red"
					}, {
						icon: 'cart',
						text: '购物车'
					}],
					buttonGroup: [{
					  text: '加入购物车',
					  backgroundColor: '#ff0000',
					  color: '#fff'
					},
					{
					  text: '立即购买',
					  backgroundColor: '#ffa200',
					  color: '#fff'
					}
					]
			}
		},
		methods: {
			buyShop(){
				this.commodity.num = this.car.num
				this.commodity.shoesize = this.car.shoesize
				this.$store.state.orderList = []
				this.$store.state.orderList.push(this.commodity)
				//console.log(this.$store.state);
				uni.redirectTo({
					url:'/pages/settlement/settlement'
				})
			},
			addCar(){
				this.car.uid = this.userinfo.id
				this.car.cid = this.cid
				
				uni.$u.http.post('/cars',this.car).then(res=>{
					console.log(res.data);
					if(res.data.code === 200){
						this.$refs.tos.success('添加成功')
						this.showuPopup = false
					}else{
						this.$refs.tos.success(res.data.msg)
					}
					
				})
				
			},
			radioClick(name) {
				
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false
				})
				this.car.shoesize = this.radios[name].num
				
			},
		
			close(){
				this.showuPopup = false
			},
			goCommodity(item){
				console.log('xxxxxxx',this.cid , item.cid );
				if(this.cid  == item.cid ) return
				uni.navigateTo({
					url:'/pages/commodity/commodity?cid='+item.cid
				})
			},
			getTuiJian(id){
				uni.$u.http.get('/commoditys?typeid='+id).then(res=>{
					
					this.list = res.data.data
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].imgurl = requestImg +'/commodity/'+ this.list[i].imgurl
					}
					console.log(this.list );
				})
			},
			isStar(id){
				uni.$u.http.get('/stars/'+id).then(res=>{
					if(res.data.code===200){
						if(res.data.data.length >= 1){
							this.star = res.data.data[0]
							this.options[1].text = '已收藏'
							this.options[1].icon = 'star-filled'
						}
					}
					
				})
			},
			goType(){
				uni.switchTab({
					url:'/pages/type/type'
				})
			},
			getRecommend(typeid){
				
			},
			getInfo(){
				
				uni.$u.http.get('/commoditys/'+this.cid).then(res=>{
					
					this.commodity = res.data.data
					this.list1.push(requestImg+'/commodity/'+this.commodity.imgurl)
					this.list1.push(requestImg+'/commodity/'+this.commodity.imgurl)
					this.list1.push(requestImg+'/commodity/'+this.commodity.imgurl)
					
					setTimeout(()=>{this.isLoading = false},700)
					
					this.commodity.imgurl = requestImg +'/commodity/'+ this.commodity.imgurl
					
					this.isStar(this.cid)
					this.getTuiJian(this.commodity.typeid)
				})
					
				
			},
			onClick (e) {
				console.log(e);
				if(uni.getStorageSync('isLogin') !== 'true'){
					this.$store.state.route.goUser = true
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				if(e.content.text === '购物车'){
					uni.switchTab({
						url:'/pages/car/car'
					})
				}
				
				if(e.content.text === '收藏'){
					let obj = {
						uid:this.userinfo.id,
						cid:this.cid
					}
					uni.$u.http.post('/stars',obj).then(res=>{
						console.log(res.data);
						this.options[1].text = '已收藏'
						this.options[1].icon = 'star-filled'
						this.isStar()
					})
					
				}
				if(e.content.text === '已收藏'){
					uni.$u.http.delete('/stars/'+this.star.sid).then(res=>{
						console.log('shanchu1',res.data);
					})
					this.options[1].text = '收藏'
					this.options[1].icon = 'star'
					
				}
			
				
			},
		  buttonClick (e) {
			if(uni.getStorageSync('isLogin') !== 'true'){
				this.$store.state.route.goUser = true
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
			if(e.index === 0){
				//加入购物车   打开弹窗
				this.isbuy = false
				this.showuPopup = true
			}
			if(e.index === 1){
				//   打开弹窗
				this.isbuy = true
				this.showuPopup = true
			}
		  }
				
		},
		onLoad(options){
			this.cid = options.cid
			this.userinfo = uni.getStorageSync('userinfo')
		},
		onShow(){
			
			this.getInfo()
		}
	}
</script>

<style scoped>
	.addCarBtn{
		padding: 0 15px;
		margin-top: 240rpx;
	}
	.buyNum{
		padding-top: 30rpx;
		clear: both;
	}
	.xuanzeMA{
		font-size: 24rpx;
		margin-left: 10px;
		margin-right: 15px;
	}
	.tags{
		margin-top: 10px;
		margin-left: 15px;
		float: left;
		width: 66px;
	}
	.u-page__tag-item {
		margin-right: 20px;
		margin-left: 20px;
	}
	.shopinfo{
		margin-top: 24px;
	}
	.popupView{
		height:950rpx;
	}
	.tuijianText{
		text-align: center;
		color: #cf0000;
	}
	.tuijianImg{
		margin: 12px;
		
	}
	.typeinfo{
		font-weight: 400;
		font-size: 15px;
	}
	.info{
		display: block;
		font-size: 14px;
		margin-left: 20px;
	}
	.Text{
		margin-left: 10px;
		font-size: 14px;
		font-weight: 600;
	}
	.typename{
		font-weight: 600;
		
		line-height: 70px;
	}
	.typeRow{
		margin-left: 10px;
		height:70px;
	}
	.content{
		height: 100%;
	}
	.goodsnav{
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.lunbo{
		
		margin: 14rpx 20rpx;
	}
	.buynumText{
		font-size: 24rpx;
	}
	.moenyText{
		color: #ffa400;
		font-weight: 600;
		font-size: 36rpx;
	}
	.row1{
		margin-top: 20px;
		margin-left: 10px;
	}
	.nameText{
		margin-left: 10px;
		font-size: 34rpx;
		font-weight: 600;
		margin-top: 10px;
	}
	.infoRow{
		padding-bottom: 12px;
	}
	
</style>
